<template>
  <el-row :gutter="10" class="comment">
    <el-col :span="4">
      <div class="user">
        <img
          v-if="data.pics.length == 0"
          src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg"
          alt=""
        />

        <img v-else :src="$axios.defaults.baseURL + data.pics[0].url" alt="" />
        <div class="username" v-if="data.account">
          {{ data.account.nickname }}
        </div>
      </div>
      <div class="level">LV.{{ data.level }}</div>
      <div class="time">{{ datachang }}</div>
    </el-col>
    <el-col :span="20">
      <div class="mainComment">
        {{ data.content }}
      </div>

      <div class="inputDom">
        <div class="enable active">
          <el-input
            type="textarea"
            :rows="1"
            placeholder="添加回复"
            v-model="textarea"
            resize="none"
            ref="textarea"
            @focus="active = true"
            @blur="hidetextarea"
          >
          </el-input>
          <transition name="el-fade-in">
            <el-button type="primary" v-show="active" @click="handleclick">
              回复
            </el-button>
          </transition>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import moment from "moment";
export default {
  props: ["data"],
  data() {
    return {
      active: false,
      textarea: "",
    };
  },

  computed: {
    datachang() {
      return moment(this.data.updated_at).format("YYYY-MM-DD hh:mm");
    },
  },

  methods: {
    hidetextarea() {
      setTimeout(() => {
        this.active = false;
      }, 200);
    },

    handleclick() {
      console.log(1);
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e4e7ec;
  .user {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    img {
      width: 44px;
      height: 44px;
      display: inline-block;
      border-radius: 50%;
      border: 2px solid #ffaa35;
    }
    .username {
      width: 55px;
      padding: 5px 3px;
      color: #ffaa35;
    }
  }
  .level {
    color: red;
    font-size: 12px;
    text-align: right;
    padding: 0 54px;
  }
  .time {
    color: #aaa7a5;
    font-size: 14px;
    padding: 0 24px;
  }

  .mainComment {
    font-size: 16px;
    padding: 5px 0;
  }

  .inputDom {
    margin-top: 10px;
  }
  .el-button {
    margin-top: 5px;
    float: right;
  }

  /deep/.el-textarea__inner {
    transition: all 0.25s;
  }
  /deep/.el-textarea__inner:focus {
    min-height: 6em !important;
  }

  .el-button {
    height: 25px;
    line-height: 25px;
    padding: 0 15px;
  }
}
</style>